<template>
	<div>
		<div class="main">
			<div class="sutitle">
				<div class="sutitle-name">
					<img src="../../../../static/home/periodical.png" alt="" width="16px" height="16px" />
					<span>最新期刊</span>
				</div>
				<router-link class="more" to='periodicalclass'>
					<span>更多</span> 
					<img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
				</router-link>
			</div>

			<div class="home-main">
				<div class="content">
					<router-link class="sm-content" v-for="(item,index) in perList" :key="index" :to='{name:"periodicallist",params:{perdata:JSON.stringify(item)}}'>
						<img :src="perSrcsmail+(item.max_file_name).substring(0,4)+'.jpg'" alt="" onerror="this.src='../../../../static/home/tushu.png'" />
						<span v-text="item.source">边城</span>
					</router-link>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";

export default {
  props: ["navid"],
  data() {
    return {
      items: [
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        }
      ],
      perSrcsmail: "",
      perList: [],
      paperList: []
    };
  },
  created() {
    this.perSrcsmail = api.perSrcsmail;
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日

    this.getinfoPer();
  },
  methods: {
    // 期刊一级上架
    getinfoPer() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            group: ["source"], //约束条件
            constraint: [],
            userId: "506",
            pageSize: "15",
            currentPage: "1",
            resourceType: "5",
            maxvalue: ["period", "file_name"] //最大字段
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.perList = response.data.data;
            console.log(this.perList);
          }
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.home-swipe {
  width: 100%;
  height: 142px;
  /*background: skyblue;*/
}

.main .sutitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}

.main .sutitle .sutitle-name {
  /*background-color: coral;*/
  flex-grow: 10;
  -webkit-flex-grow: 10;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .sutitle .sutitle-name > span {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.main .sutitle .more {
  /*background: #e60012;*/
  font-size: 13px;
  color: #b6b6b6;
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 1vh;
  margin-bottom: 13px;
}

.home-main .content {
  display: flex;
  justify-content: space-around;
  /*background: aqua;*/
  flex-wrap: wrap;
}

.home-main .content .sm-content {
  width: 26%;
  /*background: slateblue;*/
  overflow: hidden;
  margin-bottom: 10px;
}

.home-main .content .sm-content img {
  width: 100%;
  border-radius: 6px;
  box-shadow: darkgrey 2px 2px 5px;
  /*background: darkorange;*/
}

.home-main .content .sm-content span {
  width: 100%;
  font-family: "微软雅黑";
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /*background: red;*/
}
</style>